import sel from '../index.js';
export default {
  init : function () {
    sel.app.factory('effect',function () {
      var forceDraw = {};
      //绘制球
      forceDraw.node = function (nodes) {
        var nodeG = sel.d3.select('svg').append("g")
        .attr("class", "nodes")
        ;
        var node = nodeG.selectAll("circle")
          .data(nodes)
          .enter()
          .append("circle")
          .attr("r", 10)
          .attr('cx',function (d) {
            return d.x
          })
          .attr('cy',function (d) {
            return d.y
          })
          .attr('fill',function (d) {
            return d.classColor || 'blue'
          })
          .attr('opacity','0.5');
        return node
      };
      //绘制箭头
      forceDraw.arrow = function () {
        if(sel.d3.select('#arrow').length)return;
        var arrowMarker = sel.d3.select('svg').append("marker")
        .attr("id","arrow")
        .attr("markerUnits","strokeWidth")
        .attr("markerWidth",12)
        .attr("markerHeight",12)
        .attr("viewBox","0 0 24 24")
        .attr("refX",0)
        .attr("refY",12)
        .attr("orient","auto")
        var arrow_path = "M0,0 L0,24 L12,12 Z";
        // 定义箭头
        arrowMarker.append("path")
        .attr("d",arrow_path)
        .attr("fill","grey")
        ;
      };
      //绘制线
      forceDraw.line = function (line) {
        this.arrow();
        var lines = sel.d3.select('svg')
              .append("g")
              .attr("class", "links")
              .selectAll("line")
              .data(line)
              .enter()
              .append("line")
              .attr('class','edge')
              .attr('stroke','blue')
              .attr("marker-end","url(#arrow)")
              .attr('marker-mid','url(#arrow)');
              ;
        return lines;
      };

      return forceDraw;
    })
  }
}